<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chart_room</title>
    <style>
        .chart_room {
            width: 100%;
            height: 300px;
            border: 1px solid #3b0101;
            overflow: auto;

        }

        .chart_room::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        /*正常情况下滑块的样式*/

        .chart_room::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, .05);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        }

        /*鼠标悬浮在该类指向的控件上时滑块的样式*/

        .chart_room:hover::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, .2);
            border-radius: 10px;
            -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        }

        /*鼠标悬浮在滑块上时滑块的样式*/

        .chart_room::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, .4);
            -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
        }

        /*正常时候的主干部分*/

        .chart_room::-webkit-scrollbar-track {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
            background-color: white;
        }

        /*鼠标悬浮在滚动条上的主干部分*/

        .chart_room::-webkit-scrollbar-track:hover {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
            background-color: rgba(0, 0, 0, .01);
        }

        div {
            margin: 0;
            padding: 0;
        }


        .round_icon {
            width: 30px;
            height: 30px;
            display: flex;
            border-radius: 50%;
            margin-top: -10px;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        ul, li {
            margin: 5px 0 0 0;
            padding: 0;
        }
    </style>
</head>
<body>
<!--聊天室-->
<div class="chart_room" id="id_chart_room"></div>
<!--发送按钮-->
<div>
    <label for="id_button">
        <input type="text" id="id_text" name="text">
    </label>
    <input type="button" value="发送" id="id_button">
    <input type="button" value="关闭链接" id="id_close">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    // 滑轮自动移动
    $(function () {
        clickIdButton();
    });

    // 滑行
    function clickIdButton() {
        $("#id_button").click(function () {
            //设置按钮的点击事件
            $time = setInterval(function () {
                //清理定时器时使用
                var oldTop = id_chart_room.scrollTop;
                //获得老位置
                var newTop = oldTop + 5;
                //得到新位置
                id_chart_room.scrollTop = newTop;
                //将计算的新位置进行赋值，使滚动条移动
            }, 10)
            //循环时间
        })
    }

</script>
<script>
    $(function () {
        // 向后台发送短信
        sendMsg();
        colseConn();
        historicalInformation();
    })
    // ws websocket 简写 固定格式创建一个对象
    socket = new WebSocket("ws://106.14.42.253:8766/poet/{{ group }}/")
    // 创建好链接之后自动触发，(服务端执行self.accept())
    socket.onopen = function (event) {
        // 创建标签
        // 添加文本
        // 添加到聊天室
        let $divTitle = $("<div>").text("欢迎来到专属poet");
        $("#id_chart_room").append($divTitle);
    }
    // 当websocket接收到服务端发来的消息时，自动触发这个函数
    socket.onmessage = function (event) {
        // console.log(JSON.parse(event.data))
        // 当前的时间
        let time = new Date();
        // 当前发送信息的名字
        var useName = JSON.parse(event.data).username
        // 生成头像标签
        // a链接
        var $aHref = "{% url 'home' %}"
        var $imgSrc = "media/{{ request.chart_web.user.icon }}"
        var $ulIcon = $("<ul>").append($("<a>").attr({href: $aHref, alt: '个人站点'}).append($("<img>").attr({
            src: $imgSrc,
            alt: '个人头像',
            class: 'round_icon'
        })))
        // 创建内容标签
        let $divText = $("<div>").text(JSON.parse(event.data).content);
        // 创建名字标签
        let $divTime = $("<div>").text(time.toLocaleString() + ' ' + useName);
        // 添加到聊天室
        $("#id_chart_room").append($divTime).append($ulIcon).append($divText);
        // 发送信息之后，清空文本
        $("#id_text").val('')
    }

    // 客服端向服务端发送信息
    function sendMsg() {
        $("#id_button").click(function () {
            // let 以括号为作用域
            // var 以函数为单位
            let requestObj = '{{ request.chart_web.user.username }}'
            // 发送的内容
            let txt = $("#id_text").val();
            // 发送的信息序列号
            let ret = JSON.stringify({txt: txt, requestObj: requestObj, lzw: 'hpl'})
            socket.send(ret)
        })
    }

    // 获取历史信息
    function historicalInformation() {
        // 1秒秒钟之后发生信息，然后清除
        let info = setTimeout(getInfo, 100)

        function getInfo() {
            // 发送信息
            let requestObj = '{{ request.chart_web.user.username }}'
            let ret = JSON.stringify({txt: '', requestObj: requestObj})
            socket.send(ret)
        }
    }

    // 断开链接 客服端向服务端发送断开的请求(客服端主动断开链接)
    function colseConn() {
        $("#id_close").click(function () {
            socket.close();
        })
    }

    // 服务端主动断开链接以后，向客户端发送消息，该函数自动执行
    socket.onclose = function (event) {
        // 创建标签
        // 添加文本
        // 添加到聊天室
        // 离开的人名字
        let username = '{{ request.chart_web.user.username }}'
        let $div = $("<div>").text(username + '---断开链接');
        $("#id_chart_room").append($div);
    }
</script>
</body>
</html>




